import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { FaEnvelope, FaPhone, FaMapMarkerAlt, FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
import Breadcrumb from '../components/common/Breadcrumb';
import BackToTop from '../components/common/BackToTop';
import './ContactPage.css';

const ContactPage = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  
  const [formStatus, setFormStatus] = useState({
    submitted: false,
    success: false,
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // 模拟表单提交
    setFormStatus({
      submitted: true,
      success: true,
      message: '消息已发送！我会尽快回复您。'
    });
    
    // 重置表单
    setFormData({
      name: '',
      email: '',
      subject: '',
      message: ''
    });
    
    // 5秒后重置状态
    setTimeout(() => {
      setFormStatus({
        submitted: false,
        success: false,
        message: ''
      });
    }, 5000);
  };

  // 动画变体
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2
      }
    }
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5
      }
    }
  };

  return (
    <div className="contact-page">
      <Breadcrumb />
      
      <motion.div 
        className="container"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        <motion.div className="contact-header" variants={itemVariants}>
          <h1 className="page-title">联系我</h1>
          <p className="page-description">
            如果您有项目需求或合作意向，请随时与我联系。我会尽快回复您的询问。
          </p>
        </motion.div>
        
        <div className="contact-content">
          <motion.div className="contact-info-container" variants={itemVariants}>
            <div className="contact-info-card">
              <h2 className="contact-info-title">联系方式</h2>
              
              <div className="contact-method">
                <div className="contact-icon">
                  <FaEnvelope />
                </div>
                <div className="contact-details">
                  <h3>电子邮件</h3>
                  <p>
                    <a href="mailto:contact@example.com">contact@example.com</a>
                  </p>
                </div>
              </div>
              
              <div className="contact-method">
                <div className="contact-icon">
                  <FaPhone />
                </div>
                <div className="contact-details">
                  <h3>电话</h3>
                  <p>
                    <a href="tel:+8612345678901">+86 123 4567 8901</a>
                  </p>
                </div>
              </div>
              
              <div className="contact-method">
                <div className="contact-icon">
                  <FaMapMarkerAlt />
                </div>
                <div className="contact-details">
                  <h3>地址</h3>
                  <p>北京市朝阳区</p>
                </div>
              </div>
              
              <div className="social-links">
                <h3>社交媒体</h3>
                <div className="social-icons">
                  <a href="https://github.com" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
                    <FaGithub />
                  </a>
                  <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                    <FaLinkedin />
                  </a>
                  <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
                    <FaTwitter />
                  </a>
                </div>
              </div>
            </div>
          </motion.div>
          
          <motion.div className="contact-form-container" variants={itemVariants}>
            <div className="contact-form-card">
              <h2 className="contact-form-title">发送消息</h2>
              
              {formStatus.submitted ? (
                <div className={`form-message ${formStatus.success ? 'success' : 'error'}`}>
                  {formStatus.message}
                </div>
              ) : (
                <form className="contact-form" onSubmit={handleSubmit}>
                  <div className="form-group">
                    <label htmlFor="name">姓名</label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={formData.name}
                      onChange={handleChange}
                      required
                    />
                  </div>
                  
                  <div className="form-group">
                    <label htmlFor="email">电子邮件</label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      value={formData.email}
                      onChange={handleChange}
                      required
                    />
                  </div>
                  
                  <div className="form-group">
                    <label htmlFor="subject">主题</label>
                    <input
                      type="text"
                      id="subject"
                      name="subject"
                      value={formData.subject}
                      onChange={handleChange}
                      required
                    />
                  </div>
                  
                  <div className="form-group">
                    <label htmlFor="message">消息</label>
                    <textarea
                      id="message"
                      name="message"
                      rows="5"
                      value={formData.message}
                      onChange={handleChange}
                      required
                    ></textarea>
                  </div>
                  
                  <button type="submit" className="submit-btn">
                    发送消息
                  </button>
                </form>
              )}
            </div>
          </motion.div>
        </div>
        
        <motion.div className="map-container" variants={itemVariants}>
          <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9663095343047!2d-74.00425882426901!3d40.71275937932881!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259fa3947d601%3A0x3c9eb5b13a8d1c56!2sFederal%20Reserve%20Bank%20of%20New%20York!5e0!3m2!1sen!2sus!4v1674842874020!5m2!1sen!2sus" 
            width="100%" 
            height="450" 
            style={{ border: 0 }} 
            allowFullScreen="" 
            loading="lazy" 
            referrerPolicy="no-referrer-when-downgrade"
            title="位置地图"
          ></iframe>
        </motion.div>
      </motion.div>
      
      <BackToTop />
    </div>
  );
};

export default ContactPage;
